<template>
	<view class="container" :style="'height: '+screenHeight+'px!important;'">
		<view class="uni-nav">
			<image class="uni-nav-left-img" src="../../static/icon/back.png" @click="back()"></image>
			<label>导入地址</label>
			<image class="uni-nav-right-img"></image>
		</view>
		<view class="mnemonic">
			<text>助记词</text>
			<view class="view_divider"></view>
			<view class="view_textarea">
				<textarea value="" placeholder="请输入您的助记词，按空格分隔" auto-height></textarea>
			</view>
		</view>
		<view class="input-bg">
			<image src="../../static/icon/wallet_name.png"></image>
			<input class="uni-input-text" type="text" value="" placeholder="请输入钱包名称"></input>
		</view>
		<view class="input-bg" style="margin-top: 37upx;">
			<image src="../../static/icon/psw.png"></image>
			<input class="uni-input-text" type="text" value="" placeholder="请再次输入您的安全密码" password="true"></input>
		</view>
		<view class="ensure">
			<image src="../../static/icon/ensure.png" @click="open()"></image>
		</view>
		<uni-popup ref="popup" type="dialog">
			<uni-popup-dialog mode="input" title="交易密码" placeholder="输入交易密码"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script>
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniPopupMessage from '@/components/uni-popup/uni-popup-message.vue'
	import uniPopupDialog from '@/components/uni-popup/uni-popup-dialog.vue'
	export default {
		components:{
			uniPopup,
			uniPopupMessage,
			uniPopupDialog
		},
		data() {
			return {
				screenHeight: '',
			}
		},
		onLoad() {
			this.screenHeight = uni.getSystemInfoSync().windowHeight;
		},
		methods:{
			open(){
				this.$refs.popup.open()
			},
			back(){
				uni.navigateBack({
					delta:1
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		background-image: url(../../static/icon/wallet_bg.png);
		background-size: 100% 100%;
	}

	.mnemonic {
		border: 1upx solid #FDF1CF;
		border-radius: 20upx;
		display: flex;
		flex-direction: column;
		margin-left: 36upx;
		margin-right: 36upx;
		margin-top: 74upx;
		height: 395upx;
	}

	.mnemonic text {
		color: white;
		font-size: 30upx;
		font-family: SimHei;
		font-weight: 400;
		margin-left: 13upx;
		margin-top: 49upx;
	}

	.view_divider {
		background-color: #FDF1CF;
		height: 1upx;
		margin-top: 30upx;
		margin-left: 13upx;
		margin-right: 13upx;
	}

	.view_textarea {
		margin-left: 13upx;
		margin-top: 32upx;
		margin-right: 13upx;
	}
	.view_textarea textarea{
		color: white;
		font-size: 26upx;
	}
	.input-bg{
		display: flex;
		flex-direction: row;
		position: relative;
		align-items: center;
		background-size: 100% 100%;
		background-image: url(../../static/icon/input_bg.png);
		margin-left: 40upx;
		margin-right: 40upx;
		margin-top: 30upx;
		height: 123upx;
	}
	.input-bg image{
		width:30upx ;
		height: 33upx;
		margin-left: 28upx;
	}
	.input-bg input{
		margin-left: 26upx;
		font-size: 26upx;
		color: white;
	}
	.ensure{
		display: flex;
		justify-content: center;
	}
	.ensure image{
		width: 298upx;
		height: 82upx;
		margin-top: 114upx;
	}
	/* 修改弹窗样式 */
	/deep/.uni-popup-dialog {
		width: 600upx;
		border-radius: 30upx;
		background-color: #33313D;
		padding-bottom: 51upx;
	}
	/deep/.uni-dialog-title {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: center;
		padding-top: 74upx;
		padding-bottom: 72upx;
	}
	/deep/.uni-dialog-title-text {
		font-size:30upx;
		font-family:Adobe Heiti Std;
		font-weight:bold;
		color:rgba(255,255,255,1);
		line-height:32upx;
		text-shadow:2upx 3upx 1upx rgba(0, 0, 0, 0.55);
		background:linear-gradient(0deg,rgba(231,164,85,1) 0%, rgba(247,231,191,1) 100%);
		-webkit-background-clip:text;
		-webkit-text-fill-color:transparent;
	}
	/deep/.uni-dialog-input {
		flex: 1;
		font-size: 28upx;
		background-color:#2F2D38;
		border-radius: 46upx;
		margin-left: 67upx;
		margin-right: 67upx;
		height: 92upx;
		padding-left:41upx ;
		color: white;
	}
	/deep/.uni-dialog-button-group {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: space-between;
		border-top-color: transparent;
		border-top-style: solid;
		border-top-width: 1px;
		margin-top: 85upx;
		margin-left: 67upx;
		margin-right: 67upx;
	}
	/deep/.uni-border-left {
		border-left-color: transparent;
		border-left-style: solid;
		border-left-width: 1px;
	}
	/deep/.uni-dialog-button {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex: none;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		height: 74upx;
		width: 197upx;
		background:linear-gradient(0deg,rgba(231,164,85,1),rgba(247,231,191,1));
		border-radius:37upx;
	}
	/deep/.uni-dialog-button_cancel {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex: none;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		height: 74upx;
		width: 197upx;
		background:transparant;
		border: 1px solid #E9AB60;
		border-radius:37upx;
	}
	/deep/.uni-button-color {
		color: #2F2D38;
	}
	/deep/.uni-dialog-button-text {
		font-size: 28upx;
	}
	/deep/.uni-button-color_cancel {
		color: #E9AB60;
	}
</style>
